<template>
  <div class="two my_loading" v-loading="loading">
    <!-- 其他信息1 -->
    <div class="item_box" style="border-bottom: 0">
      <el-form :model="ruleForm" ref="infoParamsForm" label-width="125px" size="small">
        <el-row>
          <el-col class="item-title line" :sm="3" :md="3" :lg="3" :xl="3">其他信息</el-col>
          <el-col :sm="7" :md="7" :lg="7" :xl="7" class="item-box-l">
            <el-form-item label="调试口波特率">
              <el-input v-model="ruleForm.R_00020017" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="调试口奇偶校验">
              <el-input v-model="ruleForm.R_00020018" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="调试口停止位">
              <el-input v-model="ruleForm.R_00020019" disabled placeholder="读取中"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="7" :md="7" :lg="7" :xl="7" class="item-box-l">
            <el-form-item label="计量模块波特率">
              <el-input v-model="ruleForm.R_00020011" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="计量模块奇偶校验">
              <el-input v-model="ruleForm.R_00020012" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="计量模块停止位">
              <el-input v-model="ruleForm.R_00020013" disabled placeholder="读取中"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="7" :md="7" :lg="7" :xl="7" class="item-box-r">
            <el-form-item label="IoT模块波特率">
              <el-input v-model="ruleForm.R_00020014" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="IoT模块奇偶校验">
              <el-input v-model="ruleForm.R_00020015" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="IoT模块停止位">
              <el-input v-model="ruleForm.R_00020016" disabled placeholder="读取中"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 其他信息2 -->
    <div class="item_box">
      <el-form :model="ruleForm" ref="infoParamsForm" label-width="125px" size="small">
        <el-row>
          <el-col class="item-title line opacityStyle" :sm="3" :md="3" :lg="3" :xl="3">其他信息</el-col>
          <el-col :sm="7" :md="7" :lg="7" :xl="7" class="item-box-l">
            <el-form-item label="电能最大值(kwh)">
              <el-input v-model="ruleForm.R_00020001" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="脉冲常数(imp/kWh)">
              <el-input v-model="ruleForm.R_00020005" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="系统工作频率">
              <el-input v-model="ruleForm.R_0002000e" disabled placeholder="读取中"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="7" :md="7" :lg="7" :xl="7" class="item-box-l">
            <el-form-item label="时钟补偿值">
              <el-input v-model="ruleForm.R_00020010" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="校表补偿值">
              <el-input v-model="ruleForm.R_00020006" disabled placeholder="读取中"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="7" :md="7" :lg="7" :xl="7" class="item-box-r">
            <el-form-item label="唤醒后正常运行时间">
              <el-input v-model="ruleForm.R_0002000d" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="晶体选择编号">
              <el-input v-model="ruleForm.R_0002000f" disabled placeholder="读取中"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- IoT数据 -->
    <div class="item_box">
      <el-form :model="lotForm" ref="infoParamsForm" label-width="125px" size="small">
        <el-row>
          <el-col class="item-title line" :sm="3" :md="3" :lg="3" :xl="3">IoT数据</el-col>
          <el-col :sm="7" :md="7" :lg="7" :xl="7" class="item-box-l">
            <!-- <el-form-item label="信号强度">
              <el-input v-model="lotForm.R_01050001" disabled placeholder="读取中"></el-input>
            </el-form-item>-->
            <el-form-item label="信号误码率">
              <el-input v-model="lotForm.R_01050002" disabled placeholder="读取中"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="7" :md="7" :lg="7" :xl="7" class="item-box-l">
            <el-form-item label="IMSI">
              <el-input v-model="lotForm.R_01050003" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="ICCID">
              <el-input v-model="lotForm.R_01050004" disabled placeholder="读取中"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="7" :md="7" :lg="7" :xl="7" class="item-box-l">
            <el-form-item label="IMEI">
              <!--  芯片码 -->
              <el-input v-model="lotForm.R_01050005" disabled placeholder="读取中"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- GNSS信息(GGA) -->
    <div class="item_box">
      <el-form :model="ruleForm" ref="infoParamsForm" label-width="125px" size="small">
        <el-row>
          <el-col class="item-title line" :sm="3" :md="3" :lg="3" :xl="3">GNSS信息(GGA)</el-col>
          <el-col :sm="7" :md="7" :lg="7" :xl="7" class="item-box-l">
            <el-form-item label="时间">
              <el-input v-model="gprsForm.UTCTime" class="electricityNew" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <!-- <el-form-item label="北纬(N)"> -->
            <el-form-item :label="gprsForm.weiduDW !== '' ? `纬度(${gprsForm.weiduDW})` : '纬度'">
              <el-input v-model="gprsForm.weiDu" class="electricityNew" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item :label="gprsForm.jingDuDW !== '' ? `经度(${gprsForm.jingDuDW})` : '经度'">
              <el-input v-model="gprsForm.jingDu" class="electricityNew" disabled placeholder="读取中"></el-input>
              <!-- // 新窗口打开 -->
              <!-- <svg class="iconfont" aria-hidden="true" @click="showMap">
                  <use xlink:href="#el-icon-mywork_order" style="font-size:50px" />
              </svg>-->
              <!-- <router-link
                :to="{path: '/atuoMap', query: {lng:'116.404',lat:'30'}}"
                target="_blank"
              >
                <svg class="iconfont mapIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-myMap2" style="font-size:80px" />
                </svg>
              </router-link>-->
              <!-- // 经度lng 纬度lat
              lng:'116.404'，lat:'39.915'-->
              <!-- <router-link
                :to="{path: '/atuoMap', query: {lng:gprsForm.jingDu,lat:gprsForm.weiDu}}"
                target="_blank"
                v-if="gprsForm.weiDu!==''&& gprsForm.jingDu!==''"
              >
                <svg class="iconfont mapIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-myMap2" style="font-size:80px" />
                </svg>
              </router-link>-->
              <span @click="toHref" :style="gprsForm.weiDu === '' && gprsForm.jingDu === '' ? { display: 'none' } : ''">
                <svg class="iconfont mapIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-myMap2" style="font-size: 80px" />
                </svg>
              </span>
            </el-form-item>
            <el-form-item label="正在使用的卫星数量">
              <el-input v-model="gprsForm.weiXinNum" class="electricityNew1" disabled placeholder="读取中"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="7" :md="7" :lg="7" :xl="7" class="item-box-l">
            <el-form-item label="GPS状态">
              <el-input v-model="gprsForm.type" class="electricityNew1" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="HDOP水平精度因子">
              <el-input v-model="gprsForm.HDOP" class="electricityNew1" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="差分时间">
              <el-input v-model="gprsForm.chaFenTime" class="electricityNew" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="海拔高度">
              <el-input v-model="gprsForm.HBGaoDu" class="electricityNew1" disabled placeholder="读取中"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="7" :md="7" :lg="7" :xl="7" class="item-box-r">
            <el-form-item label="差分站ID号">
              <el-input v-model="gprsForm.chaFenId" class="electricityNew" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="校验值">
              <el-input v-model="gprsForm.jiaoYanZhi" class="electricityNew" disabled placeholder="读取中"></el-input>
            </el-form-item>
            <el-form-item label="地球大地水准面高度">
              <el-input v-model="gprsForm.DDSZGaoDu" class="electricityNew1" disabled placeholder="读取中"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- <el-dialog v-el-drag-dialog width="80%" :visible.sync="dialogFormVisible">
      <div id="container"></div>
    </el-dialog>-->
    <!-- <div id="containerxx" style="width:200px;height:300px;"></div> -->
  </div>
</template>
<script>
import { getUUID, isJSON, errorTips, send, sendPing, newSocket } from '@/utils/websocket'
import { ziC } from '@/utils/allUrl'

// const BMap = window.BMap
export default {
  data() {
    return {
      // 字段一：UTC时间  034230.000   hhmmss:sss
      // 字段二：纬度 2813.3800N 北纬 S南纬
      // 字段四：经度 11256.4755E 东经
      // 字段六：GPS状态 1 0=未定位 1=非差分定位 2=差分地位 3=无线PPS 6=正在估算
      // 字段七：7 卫星数量（0-12）
      // 字段八：1.24 HDOP水平精度因子（0.5-99.9）
      // 字段九：海拔高度 97.4（-9999.9-99999.9）
      // 字段十：M 地球椭球面相对大地水准的高度
      // 字段十一：-19.3 差分时间（从最近一次接受到差分信号开始的秒数，如果不是差分定位将为空）
      // 字段十二：M 差分站ID号0000-1023（前导位数不足则补0，如果不是差分定位将为空）
      // 字段十三：校验值
      socket: '',
      setIntervalWesocketPush: null,
      R_01040001: '', // GGA
      ruleForm: {
        R_00020017: '', // 调试口波特率
        R_00020018: '', // 调试口奇偶校验
        R_00020019: '', // 调试口停止位
        R_00020011: '', // 计量模块波特率
        R_00020012: '', // 计量模块奇偶校验
        R_00020013: '', // 计量模块停止位
        R_00020014: '', // IoT模块波特率
        R_00020015: '', // IoT模块奇偶校验
        R_00020016: '', // IoT模块停止位
        R_00020001: '', // 电能最大值
        R_00020005: '', // 脉冲常数
        R_0002000e: '', // 系统工作频率
        R_00020010: '', // 时钟补偿值
        R_00020006: '', // 校表补偿值
        R_0002000d: '', // 唤醒后正常运行时间
        R_0002000f: '', // 晶体选择编号
      },
      lotForm: {
        R_01050001: '', // 信号强度
        R_01050002: '', // 信号误码率
        R_01050003: '', // IMSI
        R_01050004: '', // ICCID
        R_01050005: '', // IMEI 芯片码
      },
      gprsForm: {
        UTCTime: '',
        weiDu: '',
        weiduDW: '',
        jingDu: '',
        jingDuDW: '',
        chaFenTime: '',
        chaFenId: '',
        jiaoYanZhi: '',
        type: '',
        weiXinNum: '',
        HDOP: '',
        HBGaoDu: '',
        DDSZGaoDu: '',
      },
      timerNum: 0,
      loading: true,
      UUID: null,
      dialogFormVisible: false,
      listLen: 0,
      listNum: 0,
      listAll: [],
      // dialog: {
      //   // dialog显示隐藏
      //   dialogVisible: false,
      //   dialogDrag: true, // 可拖拽
      //   dialogChange: true, // 可拉伸
      //   title: '详情',
      // },
    }
  },
  created() {
    this.UUID = getUUID(32, 16)
    this.username = localStorage.getItem('userName') // 用户登录名
    this.createSocket() // websocket
  },
  methods: {
    showMap() {
      const ss = document.getElementById('containerxx')
      console.log(ss)
      // var map = new BMap.Map('containerxx') // 创建地图实例
      // console.log(map)
      // var point = new BMap.Point(112.93, 28.23) // 创建点坐标
      // map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
      // map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
      // var myIcon = new BMap.Icon('markers.png', new BMap.Size(23, 25), {
      //   // 指定定位位置。
      //   // 当标注显示在地图上时，其所指向的地理位置距离图标左上
      //   // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
      //   // 图标中央下端的尖角位置。
      //   anchor: new BMap.Size(10, 25),
      //   // 设置图片偏移。
      //   // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
      //   // 需要指定大图的偏移位置，此做法与css sprites技术类似。
      //   imageOffset: new BMap.Size(0, 0 - 25), // 设置图片偏移
      // })
      // // 创建标注对象并添加到地图
      // var marker = new BMap.Marker(point, { icon: myIcon })
      // map.addOverlay(marker)
      // var local = new BMap.LocalSearch(map, {
      //   renderOptions: { map: map },
      // })
      // local.search(this.nameList)
      this.dialogFormVisible = true
    },
    // 建立websocket连接
    createSocket() {
      // // 在main.js或需要使用的地方引入并建立连接
      this.socket && this.socket.close()
      if (!this.socket) {
        console.log('建立websocket连接')
        this.socket = new WebSocket(newSocket(this.username, this.UUID))
        this.socket.onopen = this.open
        this.socket.onmessage = this.getMessage
        this.socket.onerror = this.onerror
        this.socket.onclose = this.onclose
      } else {
        console.log('websocket已连接')
      }
    },
    open() {
      sendPing(this) // 发送心跳
      // 发送数据
      if (this.socket.readyState === 1) {
        const list = [] // GGA
        this.getFor(this.ruleForm, list)
        this.getFor(this.lotForm, list)
        list.push({ command_id: '01040001', value: '' })
        this.listAll = list
        if (list.length > 20) {
          this.listNum++
          // this.listNum = false
          this.listLen = Math.ceil(list.length / 20)
          send(this, '01', list.slice(0, 20))
          return
        }
        send(this, '01', list)
      }
    },
    getMessage(msg) {
      switch (isJSON(msg.data)) {
        case false: // 主板实时数据
          break
        case true:
          // 接收到消息回复ok
          var SN = localStorage.getItem('SN')
          this.socket.send(`TILL${SN}OK`)
          if (typeof JSON.parse(msg.data) === 'object' && 'obj') {
            const res = JSON.parse(msg.data)
            switch (Number(res.doing)) {
              case 1: // 读取数据
                // 状态码错误提示
                if (res.host_status !== '0000') {
                  // errorTips(res.host_status)
                  errorTips(res.host_status, res.tips)
                  this.loading = false // 取消数据加载中样式
                  clearTimeout(this.timer)
                  this.listLen = 0
                  this.listNum = 0
                  return
                }
                // console.log(this.listNum, this.listLen)
                if (this.listNum === 1) {
                  send(this, '01', this.listAll.slice(20 * this.listNum))
                  this.listNum++
                }
                // // 接收到消息回复ok
                // var SN = localStorage.getItem('SN')
                // this.socket.send(`TILL${SN}OK`)
                if (res.list.length > 0) {
                  for (let i = 0; i < res.list.length; i++) {
                    var id = res.list[i].command_id.toLowerCase()
                    var content = res.list[i].value
                    // console.log(id, content)
                    // 其他信息
                    this.ruleForm[`R_${id}`] = content
                    // if (this.ruleForm[`R_${id}`]) {
                    //   console.log(this.ruleForm[`R_${id}`])
                    //   this.ruleForm[`R_${id}`] = content
                    // }
                    // lot数据
                    this.lotForm[`R_${id}`] = content
                    // if (this.lotForm[`R_${id}`]) {
                    //   this.lotForm[`R_${id}`] = content
                    // }
                    // return-01-202006020001:<01040001--GGA信息>$GNGGA,075853.950,,,,,0,0,,,M,,M,,*56
                    if (id === '01040001') {
                      // 字段一: 034230.000   hhmmss:sss
                      // 字段二：纬度 2813.3800
                      // 字段三：N 北纬 S南纬
                      // 字段四：纬度 11256.4755
                      // 字段五：E 东经
                      // 字段六：GPS状态 1 0=未定位 1=非差分定位 2=差分地位 3=无线PPS 6=正在估算
                      // 字段七：7 卫星数量（0-12）
                      // 字段八：1.24 HDOP水平精度因子（0.5-99.9）
                      // 字段九：海拔高度 97.4（-9999.9-99999.9）
                      // 字段十：M 地球椭球面相对大地水准的高度
                      // 字段十一：-19.3 差分时间（从最近一次接受到差分信号开始的秒数，如果不是差分定位将为空）
                      // 字段十二：M 差分站ID号0000-1023（前导位数不足则补0，如果不是差分定位将为空）
                      // 字段十三：校验值
                      const arr = content.split(',')
                      const timeArr = arr[1].split('.')
                      const str = timeArr[0]
                      let timer = ''
                      for (let i = 0, len = str.length; i < len; i++) {
                        // 重新组装时间格式
                        timer += str[i]
                        if (i % 2 === 1) {
                          if (i === str.length - 1) {
                            continue
                          }
                          timer += ':'
                        }
                      }
                      // console.log(timer)
                      const type = ['未定位', '非差分定位', '差分地位', '无线PPS', '', '', '正在估算']
                      this.gprsForm = {
                        UTCTime: timer + '.' + timeArr[1],
                        weiDu: arr[2],
                        weiduDW: arr[3],
                        jingDu: arr[4],
                        jingDuDW: arr[5],
                        chaFenTime: arr[11],
                        chaFenId: arr[12],
                        jiaoYanZhi: arr[13],
                        type: type[Number(arr[6])],
                        weiXinNum: arr[7],
                        HDOP: arr[8],
                        HBGaoDu: arr[9],
                        DDSZGaoDu: arr[10],
                      }
                    }
                  }
                  // this.loading = false // 取消数据加载中样式
                  if (this.listNum >= this.listLen) {
                    this.loading = false
                  }
                }
                // setTimeout(() => {
                //   this.loading = false
                //   this.$message.error('请稍后重试')
                // }, 5000)
                break
              case 2: // 写入数据
                console.log('02其他信息', res)
                break
              default:
            }
          }
          break
        default:
      }
    },
    getFor(obj, list) {
      for (const k in obj) {
        list.push({
          command_id: k.replace('R_', ''),
          value: '',
        })
      }
    },
    async toHref() {
      const lat = this.gprsForm.weiDu
      const lng = this.gprsForm.jingDu
      const params = new URLSearchParams()
      params.append('NE', `${lat},${lng}`)
      const { data: res } = await this.$http.post(`${ziC}kakou/changeGPS`, params)
      if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      const wd = res.data.NE.split(',')[0]
      const jd = res.data.NE.split(',')[1]
      const routeUrl = this.$router.resolve({
        path: '/atuoMap',
        query: { lng: jd, lat: wd },
      })
      // 此处使用百度地图
      window.open(routeUrl.href, '_blank')
    },
    getStr(str, firstStr, secondStr) {
      if (str === '' || str == null || str === undefined) {
        return ''
      }
      if (str.indexOf(firstStr) < 0) {
        return ''
      }
      var subFirstStr = str.substring(str.indexOf(firstStr) + firstStr.length, str.length)
      var subSecondStr = subFirstStr.replace(/\s*/g, '')
      if (secondStr !== '') {
        subSecondStr = subFirstStr.substring(0, subFirstStr.indexOf(secondStr)).replace(/\s*/g, '')
      }
      return subSecondStr
    },
    ToDigital(strDu, strFen, strMiao, len) {
      len = len > 6 || typeof len === 'undefined' ? 6 : len // 精确到小数点后最多六位
      strDu = typeof strDu === 'undefined' || strDu === '' ? 0 : parseFloat(strDu)
      strFen = typeof strFen === 'undefined' || strFen === '' ? 0 : parseFloat(strFen) / 60
      strMiao = typeof strMiao === 'undefined' || strMiao === '' ? 0 : parseFloat(strMiao) / 3600
      // console.log(strDu, strFen)
      var digital = strDu + strFen + strMiao
      if (digital === 0) {
        return ''
      } else {
        return digital.toFixed(len)
      }
    },
    onerror() {
      this.socket.close()
      clearInterval(this.setIntervalWesocketPush)
      console.log('连接失败')
    },
    onclose(e) {
      clearInterval(this.setIntervalWesocketPush)
      console.log('websocket已断开')
      this.loading = false
      this.$message.error('websocket已断开')
    },
  },
  destroyed() {
    this.socket.send('CLOSE>-<' + this.username) // 关闭页面前发送
    // 销毁监听
    clearInterval(this.setIntervalWesocketPush)
    this.socket.onclose = this.socket.close()
  },
}
</script>
<style lang="scss" scoped>
$bE5E5E5: #e5e5e5;
.two {
  padding: 0 15px 11px 15px;
  .electricityNew {
    width: 102%;
  }
  .electricityNew1 {
    width: 107%;
  }
  .network_title {
    display: flex;
    align-items: center;
    h2 {
      font-size: 18px;
    }
    span {
      font-size: 14px;
      margin-left: 60px;
      color: #3c3c3c;
    }
    .radio_btn {
      margin-left: 30px;
      font-weight: 700;
    }
  }
  .LAN_box {
    width: 100%;
    height: 380px;
    background-color: #fff;
    margin-top: 15px;
    // box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid $bE5E5E5;
    .LAN_title {
      height: 36px;
      line-height: 36px;
      padding: 5px 16px 0 16px;
      font-size: 16px;
      font-weight: 600;
      color: #101010;
      background-color: #dfe2e9;
      background: #fff;
      box-sizing: border-box;
    }
    .first_box {
      margin-top: 15px;
      .electricity {
        width: 75%;
      }
      .second {
        margin-left: 10px;
        color: #333;
        font-size: 12px;
      }
      .icon_big {
        position: relative;
      }
      .icon_box {
        position: absolute;
        top: 3px;
        right: -20px;
        color: #bbbbbb;
        .el-icon-warning-outline {
          font-size: 16px;
        }
      }
    }
  }
  .sbmit_box {
    display: flex;
    justify-content: center;
    .el-button {
      margin: 0 10px;
      font-size: 14px;
    }
  }
  .footr_box {
    margin-top: 15px;
    display: flex;
    .footr_box_title {
      height: 36px;
      line-height: 36px;
      padding: 5px 16px 0 16px;
      font-size: 15px;
      font-weight: 600;
      color: #101010;
      background-color: #dfe2e9;
      background: #fff;
    }
    .footr_box_left {
      width: 47.555%;
      height: 354px;
      background-color: #fff;
      box-sizing: border-box;
      margin-right: 15px;
      // box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.1);
      .margin_l {
        margin-left: 51px;
      }
    }
    .footr_box_right {
      width: 100%;
      height: 354px;
      background-color: #fff;
      box-sizing: border-box;
      // box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.1);
      .margin_r {
        margin-left: 5.8%;
      }
      .margin_r2 {
        margin-left: 7%;
      }
    }
  }
}
$cE5E5E5: #e5e5e5;
$c595959: #595959;
.autoOneContent {
  padding-bottom: 50px;
}
.item_box {
  width: 100%;
  padding-top: 20px;
  background-color: #fff;
  border-bottom: 1px solid $cE5E5E5;
  .item-title {
    color: $c595959;
    font-size: 16px;
    font-weight: 500;
    &.opacityStyle {
      opacity: 0;
    }
  }
  .el-button {
    padding: 8px 15px;
  }
  .item-box-r {
    .el-button {
      position: absolute;
      bottom: 15px;
      right: 0;
    }
  }
  .el-input {
    width: 260px;
  }
  .el-row {
    position: relative;
  }
  .iconfont {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    padding-left: 5px;
    &.mapIcon {
      width: 20px;
      height: 20px;
      padding-left: 15px;
    }
  }
}
.line {
  position: relative;
  padding-left: 8px;
  &::after {
    content: '';
    position: absolute;
    left: 0;
    height: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    background-color: #2aa8e1;
  }
}
::v-deep.inputNumber {
  .el-input {
    width: 140px;
  }
  .el-input-number--small {
    width: 140px !important;
  }
}
::v-deep .el-cascader {
  width: 260px;
}

::v-deep .el-input.is-disabled .el-input__inner {
  color: #333;
}
</style>
